<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="css/style.css" />
    <!--[if IE 6]>
    <script src="js/iepng.js" type="text/javascript"></script>
        <script type="text/javascript">
           EvPNG.fix('div, ul, img, li, input, a'); 
        </script>
    <![endif]-->    
    <script type="text/javascript" src="js/jquery-1.11.1.min_044d0927.js"></script>
	<script type="text/javascript" src="js/jquery.bxslider_e88acd1b.js"></script>
    
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>    
        
	<script type="text/javascript" src="js/select.js"></script>
    
	<script type="text/javascript" src="js/lrscroll.js"></script>
    
    <script type="text/javascript" src="js/iban.js"></script>
    <script type="text/javascript" src="js/fban.js"></script>
    <script type="text/javascript" src="js/f_ban.js"></script>
    <script type="text/javascript" src="js/mban.js"></script>
    <script type="text/javascript" src="js/bban.js"></script>
    <script type="text/javascript" src="js/hban.js"></script>
    <script type="text/javascript" src="js/tban.js"></script>
    
	<script type="text/javascript" src="js/lrscroll_1.js"></script>
  <script src="./js/axios.js"></script>
  <script src="./js/vue.js"></script>
  <script src="./js/md5.js"></script>
    
    
<title>尤洪</title>
</head>
<body>  
  <div id="box">
      <!--Begin Header Begin-->
<div class="soubg">
	<div class="sou">
        <span class="fr">
        	<span class="fl">你好，请<a href="Login.html">登录</a>&nbsp; <a href="Regist.html" style="color:#ff4e00;">免费注册</a>&nbsp; </span>
            <span class="fl">|&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="images/s_tel.png" align="absmiddle" /></a></span>
        </span>
    </div>
</div>
<!--End Header End--> 
<!--Begin Login Begin-->
<div class="log_bg">	
    <div class="top">
        <div class="logo"><a href="Index.html"><img src="images/logo.png" /></a></div>
    </div>
	<div class="regist">
    	<div class="log_img"><img src="images/l_img.png" width="611" height="425" /></div>
		<div class="reg_c">
        	<form>
            <table border="0" style="width:420px; font-size:14px; margin-top:20px;" cellspacing="0" cellpadding="0">
              <tr height="50" valign="top">
              	<td width="95">&nbsp;</td>
                <td>
                	<span class="fl" style="font-size:24px;">注册</span>
                    <span class="fr">已有商城账号，<a href="Login.html" style="color:#ff4e00;">我要登录</a></span>
                </td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;用户名 &nbsp;</td>
                <td><input type="text" v-model:value="registeredName" class="l_user"  /><span>{{usernameSpan}}</span></td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;密码 &nbsp;</td>
                <td><input type="password" v-model:value="registeredPassWord" class="l_pwd" /></td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;确认密码 &nbsp;</td>
                <td><input type="password" v-model:value="registeredQrPassWord"  class="l_pwd" /></td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;邮箱 &nbsp;</td>
                <td><input type="text" v-model:value="registeredEmail"  class="l_email" /></td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;手机 &nbsp;</td>
                <td><input type="text" v-model:value="registeredPhone"  class="l_tel" /></td>
              </tr>
              <tr height="50">
                <td align="right"> <font color="#ff4e00">*</font>&nbsp;验证码 &nbsp;</td>
                <td>
                    <input type="text" v-model:value="yzm" class="l_ipt" />
                    <a href="#" style="font-size:12px; font-family:'宋体';" @click="imgSrc">换一张</a>
                    <img :src="imgSrcStr" alt="">
                </td>
              </tr>
              <tr>
              	<td>&nbsp;</td>
                <td style="font-size:12px; padding-top:20px;">
                	<span style="font-family:'宋体';" class="fl">
                    	<label class="r_rad"><input type="checkbox" @click="checkFun" :checked="inputFlag" /></label><label class="r_txt">我已阅读并接受《用户协议》</label>
                    </span>
                </td>
              </tr>
              <tr height="60">
              	<td>&nbsp;</td>
                <td><input type="button" value="立即注册" @click="login" class="log_btn" /></td>
              </tr>
            </table>
            </form>
        </div>
    </div>
</div>
<!--End Login End--> 
<!--Begin Footer Begin-->
<div class="btmbg">
    <div class="btm">
        备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com   Copyright © 2015-2018 尤洪商城网 All Rights Reserved. 复制必究 , Technical Support: Dgg Group <br />
        <img src="images/b_1.gif" width="98" height="33" /><img src="images/b_2.gif" width="98" height="33" /><img src="images/b_3.gif" width="98" height="33" /><img src="images/b_4.gif" width="98" height="33" /><img src="images/b_5.gif" width="98" height="33" /><img src="images/b_6.gif" width="98" height="33" />
    </div>    	
</div>
  </div>

<!--End Footer End -->    
  <script>
    new Vue({
      el:"#box",
      data:{
        yzm:"",
        registeredName:"",
        registeredPassWord:"",
        registeredQrPassWord:"",
        registeredEmail:"",
        registeredPhone:"",
        VerificationCode:"",
        regularList:{},
        usernameSpan:"",
        UserList:{},
        imgSrcStr:"",
        inputFlag:false,
      },
      methods:{
        md5Public:async function(objectStr){
          let randomNum = 0;
          //接口拿随机数
          await axios({
              url:"http://localhost:8080/setRedisNum",
              methods:"get"
          }).then(res => {
              randomNum = res.data;
          })
          //放到header里的参数 时间戳 随机数 加密的字符串
          //时间戳
          var dateStr = new Date();
          dateStr = Date.now();
              
          //把obj按照key值升序
          let sortObject = function(obj){
              let sorter = function(a,b){
                  return obj[a] - obj[b];
              }
              let keys = Object.keys(obj);
              keys.sort(sorter);
              let res = {};
              keys.forEach(key => {
                  res[key] = obj[key];
              });
              return res;
          }
          //升序的对象
          var sxStr = sortObject(objectStr);
          //把升序的对象转成字符串
          var jsonStr = "";
          for(let obj in objectStr){
              jsonStr += obj+"="+objectStr[obj]+"&";
          }
          //把最后一个&符号切割了
          jsonStr = jsonStr.substr(0, jsonStr.length - 1); 

          //加密字符串
          var str = MD5(jsonStr+randomNum);
          await axios({
              url:"http://localhost:8080/returnInterfaceStr",
              methods:"POST",
              params:objectStr,
              headers:{
                  "TimeStamp":dateStr,
                  "randomNum":randomNum,
                  "encryptionStr":str
              }
          }).then(res => {
              if( res.data == true ){
                  return true;
              }else{
                  return false;
              }
          })
          return true;
      },
        publicList:async function(){
          let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
          if(flag == true){
            await axios({
              url:"http://localhost:8080/getRegular",
              methods:"GET"
            }).then(res => {
              this.regularList = res.data[0];
            })
            await axios({
              url:"http://localhost:8080/getUserList",
              methods:"GET"
            }).then(res => {
              this.UserList = res.data;
            })
          }
        },
        imgSrc:async function(){
          let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
          if( flag == true ){
            await axios.get("http://localhost:8080/captcha",{responseType:"blob"}).then(res => {
              this.imgSrcStr = window.URL.createObjectURL(res.data);
            })
          }
        },
        checkFun:function(){
          this.inputFlag = !this.inputFlag;
        },
        login:async function(){
          await this.publicList();
          console.log(this.UserList);
          //比对正则
          var username = new RegExp(this.regularList.username);
          if( this.registeredName == "" ){
            alert("账号为空,请输入!");
            return;
          }
          /*if( username.test(this.registeredName) == false ){
            alert("格式不对,请重新输入!");
            this.registeredName = "";
            return;
          }*/
          for(let i=0;i<this.UserList.length;i++){
            if( this.UserList[i].userName == this.registeredName ){
              alert("账号已存在,请重新输入!");
              return;
            }
          }
          if( this.registeredPassWord == "" ){
            alert("密码为空,请输入!");
            return;
          }
          if( this.registeredQrPassWord == "" ){
            alert("确认密码为空,请输入!");
            return;
          }
          if( this.registeredPassWord != this.registeredQrPassWord  ){
            alert("密码不一致,请重新输入!");
            this.registeredPassWord = "";
            this.registeredQrPassWord = "";
            return;
          }
          
          var email = new RegExp(this.regularList.email);
          if( this.registeredEmail == "" ){
            alert("邮箱为空,请输入!");
            return;
          }
         /* if( email.test(this.registeredEmail) == false ){
            alert("邮箱格式不对,请重新输入");
            this.registeredEmail = "";
            return;
          }*/

          var phone = new RegExp(this.regularList.phone);
          if( this.registeredPhone == "" ){
            alert("手机号为空,请输入!");
            return;
          }
          /*
          if( phone.test(this.registeredPhone) == false ){
            alert("手机号格式不对,请重新输入");
            this.registeredPhone = "";
            return;
          }*/
          
          let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
          if(flag == true){
            //验证码判断
            await axios({
              url:"http://localhost:8080/login",
              methods:"GET",
              params:{
                "code":this.yzm
              }
            }).then(res => {
              var flag = res.data;
              if( flag == false ){
                alert("验证码错误!");
                this.yzm = "";
                this.imgSrc();
                return;
              }
            })
            if( this.yzm == "" ){
              return;
            }
            if( this.inputFlag == false ){
              alert("请先点勾!");
              return;
            }
            alert("全部正确");
            axios({
              url:"http://localhost:8080/setUser",
              methods:"POST",
              params:{
                userName:this.registeredName,
                loginName:this.registeredName,
                password:this.registeredPassWord,
                email:this.registeredEmail,
                mobile:this.registeredPhone,
                type:0,
                sex:1
              }
            }).then(res => {
              console.log(res);
              if( res.data == true ){
                alert("注册成功!");
                window.location.href = "./Login.html";
              }
            })
          }
        }
      },
      created:function(){
        this.imgSrc();
      }
    })
  </script>

</body>
</html>
